let deleadv = $('.clearadv');
$(function() {
	//header adv 清除
	deleadv.click(function() {
		$(this).parents('.headeradv').remove();
	})
	//头部定位nav and 楼层导航
	let adisd = $('.bar');
	let flooritems = document.querySelectorAll('.floornav li');
	let floornav = $('.floornav');
	let retop = $('.retop');
	retop[0].onclick = function() {
		window.scroll(0, 0);
	}
	window.onscroll = function() {
		let size = window.pageYOffset;
		if (size < 200) {
			adisd.slideUp(200);
		}
		if (size > 200) {
			adisd.slideDown(200);
		}
		if (size < 400) {
			floornav.hide(500);
		}
		if (size > 400) {
			floornav.show(500);
		}
		if (size < 765) {
			clearclass();
			flooritems[0].className = 'flooritem';
		}
		if (size > 760 && size < 1500) {
			clearclass();
			flooritems[1].className = 'flooritem';
		}
		if (size > 1500 && size < 2100) {
			clearclass();
			flooritems[2].className = 'flooritem';
		}
		if (size > 2100 && size < 2500) {
			clearclass();
			flooritems[3].className = 'flooritem';
		}
		if (size > 2400 && size < 3000) {
			clearclass();
			flooritems[4].className = 'flooritem';
		}
		if (size > 3100 && size < 3500) {
			clearclass();
			flooritems[5].className = 'flooritem';
		}
		if (size > 3200 && size < 3800) {
			clearclass();
			flooritems[6].className = 'flooritem';
		}
		if (size > 3800 && size < 4800) {
			clearclass();
			flooritems[7].className = 'flooritem';
		}
	}

	function clearclass() {
		flooritems.forEach(function(v, i) {
			v.className = '';
		})
	}
	//轮播图
	$('.demo').slider({
		imgList: [{
				img: 'img/jlmbanner1.jpg',
				a: '#',
			},
			{
				img: 'img/jlmbanner2.jpg',
				a: '#',
			},
			{
				img: 'img/jlmbanner3.jpg',
				a: '#',
			},
			{
				img: 'img/jlmbanner4.jpg',
				a: '#',
			},
			{
				img: 'img/jlmbanner5.jpg',
				a: '#',
			}
		], //图片的列表
		width: 760, //图片的宽
		height: 500, //图片的高
		isAuto: true, //是否自动轮播
		moveTime: 3000, //运动时间
		direction: 'right', //轮播的方向
		btnWidth: 30, //按钮的宽
		btnHeight: 30, //按钮的高
		spanWidth: 10, //span按钮的宽
		spanHeight: 10, //span按钮的高
		spanColor: 'black', //span按钮的颜色
		activeSpanColor: '#fff', //选中的span颜色
		btnBackgroundColor: 'rgba(0, 0, 0, 0.3)', //两侧按钮的颜色
		spanRadius: '50%', //span按钮的圆角程度
		spanMargin: 3, //span之间的距离

	})
	//banner tab切换
	let themitem = $('.themitem');
	let textbox = $('.textbox');
	themitem.mouseover(function() {
		$(this).addClass('red').siblings().removeClass('red');
		var ind = $(this).index();
		if (ind == 2) {
			ind = 1;
			textbox[ind].className = 'textbox block';
			textbox[0].className = 'textbox';
		} else {
			textbox[ind].className = 'textbox block';
			textbox[1].className = 'textbox';
		}
	})

	//shoptop中渲染数据
	let data = shoptop[0].data;
	let s_list = $('.s_list');
	let stimg = $('.st_img');
	var str = '';
	$(data).each(function(i, v) {
		str += `
		<li><img src="${v}" alt=""></li>
		`;
	})
	stimg.append(str);

	//shopauto中渲染数据
	let autolist = $('.autolist');
	let gor = $('.gor');
	let gol = $('.gol');
	let shopstr = '';
	$(shopauto).each(function(i, v) {
		shopstr += `
		<li class="s_item">
			<div class="img">
				<a href=""><img src="${v.data}" alt=""></a>
			</div>
			<p class="msg"><a href="">${v.name}</a></p>
			<p>
				<span class="red">$</span><span class="money">${v.price}</span>
				<span class="oldmony">${v.oldprice}</span>
			</p>
		</li>
		`;
	})
	autolist.append(shopstr);

	//添加左右按钮
	//给左右按钮添加事件 and 自动轮播
	var index = 0;
	var timid;

	function auot() {
		timid = setInterval(function() {
			index++;
			if (index == 11) {
				index = 0;
				autolist[0].style.left = 0;
			}
			var target = index * -240;
			autolist.animate({
				left: target
			})
		}, 4000)
	}
	auot();
	gor.click(function() {
		index++;
		if (index == 11) {
			index = 0;
			autolist[0].style.left = 0;
		}
		var target = index * -240;
		autolist.animate({
			left: target
		})
	})
	gol.click(function() {
		index--;
		if (index < 0) {
			index = 0;
			autolist[0].style.left = 0;
		}
		var target = index * -240;
		autolist.animate({
			left: target
		})
	})
	autolist.mouseover(function() {
		clearInterval(timid);
	})
	autolist.mouseout(function() {
		auot();
	})
	s_list.mouseover(function() {
		gol.show();
		gor.show();
	})
	s_list.mouseout(function() {
		gol.hide();
		gor.hide();
	})

	//shop2数据渲染
	let advimg = $('.advimg');
	let advimg2 = $('.advimg2');
	let advHtml = '';
	let advhtml2 = '';
	$(shop2[0].data).each(function(i, v) {
		advHtml += `
		<li>
			<a href=""><img src="${v}" alt=""></a>
		</li>
		`;
	})
	advimg.append(advHtml);
	$(shop2[1].data).each(function(i, v) {
		advhtml2 += `
		<li>
			<a href=""><img src="${v}" alt=""></a>
		</li>
		`;
	})
	advimg2.append(advhtml2);

	//find数据渲染
	let mlist = $('.mlist');
	let mlisthtml = '';
	$(finddata).each(function(i, v) {
		mlisthtml += `
		<li>
			<div class="subimg">
				<img src="${v.data}" alt="">
			</div>
			<div class="text">
				<p>${v.title}</p>
				<p>${v.ms}</p>
			</div>
		</li>
		`;
	})
	mlist.append(mlisthtml);

	//--------
	let spec = $(special[0].data);
	let spec2 = $(special[1].data);
	let r_left = $('.r_left');
	let r_right = $('.r_right');
	let spechtml = '';
	let spechtml2 = '';
	xr(spec, spechtml, r_left);
	xr(spec2, spechtml2, r_right);

	function xr(arr, target, ele) {
		arr.each(function(i, v) {
			target += `
				<div class="Tpull">
					<span class="bs">${v.name}</span><span>${v.dav}</span>
					<div class="pullimg">
						<a href=""><img src="${v.src}" alt=""></a>
					</div>
				</div>
			`;
		})
		ele.append(target);
	}
	//------------- mate区渲染
	let phone = $(special[2].data);
	let phone2 = $(special[3].data);
	let mate = $('.mate');
	let matehtml = '';
	let bommate = $('.bommate');
	let bomhtml = '';
	xr2(phone, matehtml, mate);
	xr3(phone2, bomhtml, bommate);

	function xr2(arr, target, ele) {
		arr.each(function(i, v) {
			target += `
				<li>
					<p class="titmsg">${v.name}</p>
					<p class="red">${v.dav}</p>
					<a href=""><img src="${v.src}" alt=""></a>
				</li>
			`;
		})
		ele.append(target);
	}

	function xr3(arr, target, ele) {
		arr.each(function(i, v) {
			target += `
				<li>
					<div class="text">
						<p>${v.name}</p>
						<span>${v.dav}</span>
					</div>
					<a href=""><img src="${v.src}" alt=""></a>
				</li>
			`;
		})
		ele.append(target);
	}

	//特卖区数据
	let s_msg = $('.s_msg1');
	let temai = $(special[4].data);
	let smsghtml = '';
	xr4(temai, smsghtml, s_msg);

	function xr4(arr, target, ele) {
		arr.each(function(i, v) {
			target += `
				<div class="radv radv1">
					<div class="lmsg">
						<p class="tit">${v.name}</p>
						<p class="gray">${v.dav}</p>
					</div>
					<a href=""><img src="${v.src}" alt=""></a>
				</div>
			`;
		})
		ele.append(target);
	}
	let advlist = $('.advlist');
	let temai3 = $(special[5].data);
	let advlisthtml = '';
	xr5(temai3, advlisthtml, advlist);
	var i = 0;

	function xr5(arr, target, ele) {
		arr.each(function(i, v) {
			i++;
			target += `
				<li>
					<p>
						<a href=""><img src="${v.src}" alt=""></a>
					</p>
					<p class="describle">${v.name}</p>
					<p><span>$</span><span class="money">${v.dav}</span></p>
					<div class="sign">${i}</div>
				</li>
			`;
		})
		ele.append(target);
	}

	//六色图片
	let colorimg = $(special[6].data);
	let i_list = $('.i_list');
	let ilisthtml = '';
	xr6(colorimg, ilisthtml, i_list);

	function xr6(arr, target, ele) {
		arr.each(function(i, v) {
			i++;
			target += `
			<li>
				<div class="msg">
					<span class="top"></span>
					<h2>${v.name}</h2>
					<span class="center"></span>
					<p>${v.dav}</p>
				</div>
				<img src="${v.src}" alt="">
			</li>
			`;
		})
		ele.append(target);
	}

	let pageHo = allObj.pageHome; //获取主页全部数据
	let shoplist = $(pageHo);
	let boxlist = $('.boxlist');
	let boxhtml = '';



	xr7(shoplist, boxhtml, boxlist);

	function xr7(arr, target, ele) {
		arr.each(function(i, v) {
			target += `
		<li data-id='${v.id}'>
			<a href=""><img src="${v.data.src}" alt=""></a>
			<div class="msg">
				<div class="text">${v.data.name}</div>
				<p><span class="red">$ ${v.data.new}</span>
					<span class="old">$ ${v.data.old}</span>
				</p>
			</div>
		</li>
			`;
		})
		ele.append(target);
		let shopli = $('.boxlist li');
		var storage = window.localStorage;
		//添加点击事件
		shopli.click(function() {
			//获取当前元素的data-id
			var id = $(this).attr('data-id');
			var data = arr.filter(function(i, v) {
				return v.id == id;
			})
			//把id存入本地存储
			storage.setItem("id" + id + "", id);
			storage.setItem("id", id);
			//为首页存储索引 找到对应的浏览数据
			storage.setItem("index", 0);
			window.location.href = 'particulars.html';
		})
	}
	let topnav = $('.adisdnav2');
	let classify2 = $('.classify2');
	let navlist = $('.navlist2');
	let bigbox = $('.bigbox2');
	classify2.hover(function() {
		topnav.toggle();
	})
	navlist.hover(function() {
		topnav.toggle();
	})
	bigbox.hover(function() {
		topnav.toggle();
	})


	//页面购物车中添加数据
		//购物车-----------------------------------------------
		let dataage = window.localStorage;
		//获取所有数据
		let allData = allObj.pageHome;
		//筛选数据
		var arrNew = new Array;
		for (let k in dataage) {
			//遍历本地存储 将获取到的值添加到数组
			arrNew.push(k);
		}
		//截取不需要的值
		arrNew.splice(arrNew.length - 6, 6);
		var newData = new Array;
		//将本地存储中的id和数据中的id做对比
		arrNew.map(function(value, i) {
			return newData.push(allData.filter(function(v, i) {
				return value.slice(3, 8) == v.id;
			}));
		})
		//渲染数据  flat()是将多维数组展开
		var x = newData.flat();
		var lisxboxhtml = '';
		var cebianShopCarHtml = '';
		$(x).each(function(i, v) {
			lisxboxhtml +=`
			<div class="shopitem" data-id="${v.id}">
				<a href=""><img src="${v.data.src}" alt=""></a>
				<div class="text">
					<a href="">
						${v.data.name}
					</a>
				</div>
				<div class="operator">
					<div class="counts">
						1
					</div>
					<div class="btn">
						<div class="add">+</div>
						<div class="reduce">-</div>
					</div>
				</div>
				<div class="smsg">
					<p class="money">${v.data.new.toFixed(2)}</p>
					<p><a href="#" class="shopremove">删除</a></p>
				</div>
			</div>
			`;
			cebianShopCarHtml +=`
			<div class="cart-block" data-id="${v.id}">
				<div class="checkbox-wrap">
					<img src="" class="tick">
					<input type="checkbox" name="" id="" value="" class="checkbox mycheckbox"/>
				</div>
				<img src="${v.data.src}" class="cart-goods-img">
				<div class="cart-goods-info">
					<p class="cart-goods-name">
							${v.data.name}
					</p>
					<p class="cart-goods-sku del">
			            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
			            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
			            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
			            </svg>
			        </p>
					<div class="price-wrap">
						<span>￥<span class="price">${v.data.new}</span></span>
						<div class="num-wrap">
							<img src="img/sub.png" class="sub">
							<input type="number" name="" id="num-input" class="num-input" value="1" readonly/>
							<img src="img/add.png" class="add">
						</div>
					</div>
				</div>
			</div>
			`;
		})	
		

	$('.gouwu_zhans').append(cebianShopCarHtml);
	$('.list_box').append(lisxboxhtml);
	// 商品数量变化
	$(".cxdsp").html($(".cart-block").length);
	$(".shangpinsl").html($(".cart-block").length);
	// 有商品的时候 - 小鸟消失
	if ($(".cart-block").length>0) {
	    $(".zhans_xiaon").css("display","none");
	}else{
	    $(".zhans_xiaon").css("display","flex");
	}
	$(".del").each(function(i,v){
	    $(v).on("click change",function(){
	        var bendiid = $(this).parent().parent().attr("data-id");
	        $(this).parent().parent().remove();
	        localStorage.removeItem("sid"+bendiid);
	        // 商品数量变化
	        $(".cxdsp").html($(".cart-block").length);
			count.html($(".cart-block").length);
	        $(".shangpinsl").html($(".cart-block").length);
	        // 有商品的时候 - 小鸟消失
	        if ($(".cart-block").length>0) {
	            $(".zhans_xiaon").css("display","none");
	        }else{
	            $(".zhans_xiaon").css("display","flex");
	        }
	        total();
			window.location.reload();
	    })
	})
	
	// 删除 - 删除商品 - 同时删除本地存储的数据
	let shopcar = $(".shopcar");
	let shoptext = $(".shoptext");
	let shopitem = $(".shopitem");
	let total_money = $('.total_money');
	let total_num = $('.total_num');
	let carsubbox = $('.carsubbox');
	let product = $('.product');
	let cartblock = $('.cart-block');
	let add = $('.add');
	let reduce = $('.reduce');
	let count = $('.count');
	let allMoney = $(".shopitem .money");
	count.html(allMoney.length);
	$(".cxdsp").html(allMoney.length);
	add.each(function(i,v){
		var numbs =	parseFloat($(this).parents('.operator').next().find('.money').html());
		$(v).click(function(){
			var i = $(this).parent().prev().html();
			//获取当前点击索引
			let parentindex = $(this).parents('.shopitem').index();
			var kind = $(this).parents('.shopitem').attr('data-id');
			i ++;
			$(this).parent().prev().html(i);
			$(cartblock[parentindex]).find('.num-input').val(i);
			var money = i * numbs;
			$(this).parents('.operator').next().find('.money').html(money.toFixed(2));
			getmoney()
		})
	})
	reduce.each(function(i,v){
		var numbs =	parseFloat($(this).parents('.operator').next().find('.money').html());
		$(v).click(function(){
			var index = $(this).parent().prev().html();
			//获取当前点击索引
			let parentindex = $(this).parents('.shopitem').index();
			var kind = $(this).parents('.shopitem').attr('data-id');
			index --;
			if(index < 1){
				index = 1;
			}
			var money = index * numbs;
			$(cartblock[parentindex]).attr("data-id",kind).find('.num-input').val(index);
			$(this).parent().prev().html(index);
			$(this).parents('.operator').next().find('.money').html(money.toFixed(2));
			getmoney();
		})
	})
	
	getmoney();
	shopitem.children().find('.shopremove').click(function(){
		if(confirm("确定删除吗?")){
			$(this).parents('.shopitem').remove();
				count.html(allMoney.length);
				$(".cxdsp").html(allMoney.length);
			let id = $(this).parents('.shopitem').attr('data-id');
			window.localStorage.removeItem('sid'+id);
				getmoney();
				window.location.reload();
		}
	})
	
	//获取总价
	function getmoney(){
		let allMoney = $(".shopitem .money");
		var sum = 0;
		if(allMoney.length == 0){
			carsubbox.css('display','block');
			product.hide();
		}else{
			carsubbox.css('display','none');
			product.show();
		}
		allMoney.each(function(i,v){
		sum += parseFloat( $(v).html());
		})
		total_money.html(sum);
		count.html(allMoney.length);
		$(".cxdsp").html(allMoney.length);
		total_num.html(allMoney.length);
	}
	
	shoptext.click(function() {
		window.location.href = 'shopCar.html';
	})
	
	
	//跳转浏览记录页面
	let browses = document.querySelector('.liulan');
	browses.onclick = function(){
		window.location.href = 'browsingHistory.html';
	}
})
